<template>
    <div id="header-content">
        <el-form class="form">
            <el-form-item label="开始日期">
                <el-date-picker
                    v-model="searchParams.startDate"
                    align="right"
                    placeholder="开始日期"
                    value-format="yyyyMMdd"
                    format="yyyy-MM-dd"
                    @change="startDateChange"
                    size="mini"
                    class="item"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                    v-model="searchParams.endDate"
                    align="right"
                    placeholder="结束日期"
                    :picker-options="traderDatePickerE"
                    value-format="yyyyMMdd"
                    format="yyyy-MM-dd"
                    size="mini"
                    class="item"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="条目编号/名称">
                <el-select
                    placeholder="请选择"
                    multiple
                    filterable
                    collapse-tags
                    clearable
                    size="mini"
                    v-model="searchParams.entryCodeList"
                    @change="changeParamsValue(searchParams.entryCodeList, 'entryCodeList')"
                    class="item2"
                >
                    <el-option
                        v-for="item in entryStorage"
                        :key="item.entryCode"
                        :label="item.entryCode + ' ' + item.entryName"
                        :value="item.entryCode"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品编号/名称">
                <RiskEntryInputs
                    :showAll="false"
                    :interfaceUrl="'/fundInfo/list/byUser/like?isStatic=Y&fundCodeOrName='"
                    @set-entry-data="value => (searchParams.fundCodeList = value)"
                    :returnDatas="searchParams.fundCodeList"
                    :showDis="false"
                    :isStatic="true"
                    class="item2"
                />
                <!-- <el-select
                    v-model="searchParams.fundCodeList"
                    size="mini"
                    class="item"
                    filterable
                    clearable
                    multiple
                    collapse-tags
                    @change="changeParamsValue(searchParams.fundCodeList, 'fundCodeList')"
                >
                    <el-option
                        v-for="item in fundOptions"
                        :key="item.fundCode"
                        :value="item.fundCode"
                        :label="item.fundCode + ' ' + item.fundNameSt"
                    ></el-option>
                </el-select> -->
            </el-form-item>

            <!-- <el-form-item label="超标原因" v-if="isOpen">
                <el-input v-model="searchParams.overrunName" size="mini" class="item"></el-input>
            </el-form-item>

            <el-form-item label="调整跟踪" v-if="isOpen">
                <el-input v-model="searchParams.adjusrTrack" size="mini" class="item"></el-input>
            </el-form-item> -->
        </el-form>
        <div style="margin-top: 6px">
            <!-- <span id="show-content" @click="openBtn">
                更多查询条件
                <i :class="{ 'el-icon-arrow-down': !isOpen, 'el-icon-arrow-up': isOpen }"></i>
            </span> -->
            <el-button size="mini" type="primary" @click="handleBtn('search')">查询</el-button>
            <el-button size="mini" @click="handleBtn('loadout')">导出</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import RiskEntryInputs from '@/common/components/risk-entry-inputs.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions } from '@/utils/tools';
import moment from 'moment';
import { Component, Vue } from 'vue-property-decorator';
import { overReasonFollowDTO } from '../vo/risk-result';

@Component({ name: 'OverReasonFollowSearch', components: { RiskEntryInputs } })
export default class OverReasonFollowSearch extends Vue {
    fundOptions: any = [];
    entryStorage: any = [];
    searchParams: overReasonFollowDTO = { startDate: '', endDate: '', entryCodeList: [], fundCodeList: [] };
    isOpen: boolean = false;
    traderDatePickerE = {
        disabledDate: time => {
            let minDate;
            let maxDate;
            if (this.searchParams.startDate) {
                const startDate = moment(this.searchParams.startDate).format('yyyy-MM-DD');
                // 结束日期不能比开始日期小
                minDate = Date.parse(startDate);
                // 结束日期需要限制为比今天要小吗？
                return time.getTime() < minDate - 3600 * 1000 * 24;
            }
        },
    };

    async mounted() {
        // this.fundOptions = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
        this.getEntryList();
    }

    // 下拉框数据置顶
    private changeParamsValue(val: any = [], field): void {
        if (field == 'entryCodeList') {
            this.entryStorage = changeOptions(val, this.entryStorage, 'entryCode');
        }
        // else if (field == 'fundCodeList') {
        //     this.fundOptions = changeOptions(val, this.fundOptions, 'fundCode');
        // }
    }

    /**
     * 按钮点击
     */
    async handleBtn(type: string) {
        this.$emit('handle-btn', type);
    }

    /**
     * 获取条目列表
     */
    getEntryList(): void {
        this.$axios
            .post('/entry/list/CodeOrName', {
                codeOrName: '',
                entryType: '',
                paging: { currentPage: 1, pageSize: 19960831 },
                filterEntryCode: [],
            })
            .then((res: any) => {
                this.entryStorage = res.list;
            });
    }

    // 计算开始日期改变
    private startDateChange(val): void {
        this.searchParams.endDate = undefined;
    }

    private openBtn() {
        this.isOpen = !this.isOpen;
        this.$emit('comReturn', this.isOpen);
    }
}
</script>
<style lang="scss" scoped>
#header-content {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #fff;

    .form {
        width: calc(100% - 255px);
        display: grid;
        grid-template-columns: 1fr 1fr 1.1fr 1.1fr;
        /deep/.el-form-item {
            margin-bottom: 0px;
            .el-form-item__label {
                color: #575757 !important;
            }
        }

        .item {
            width: calc(100% - 100px);
        }
        .item2 {
            width: calc(100% - 130px);
            display: inline-block;
        }
    }
    #show-content {
        cursor: pointer;
    }
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    width: 100%;
}
/deep/ .el-select__tags {
    flex-wrap: nowrap;
}
</style>
